<script setup>
import UserBox from "@/components/user_cover/UserBox.vue";
import {onMounted, ref} from "vue";

let isShow = false;
const contentClass = ref('');
const textClass = ref('hidden');
const btnText = ref('展开');
const showMore = () => {
  if (isShow) {
    contentClass.value = '';
    textClass.value = 'hidden';
    btnText.value = '展开';
  } else {
    contentClass.value = 'show';
    textClass.value = '';
    btnText.value = '收起';
  }

  isShow = !isShow;
}

const boxRef = ref();
const isShowMoreBtn = ref(false);
const swapShowMoreBtn = () => {
  isShowMoreBtn.value = boxRef.value.clientHeight >= 178;
}
onMounted(() => {
  swapShowMoreBtn()
})

defineProps({
  isTopLevel: {
    type: Boolean,
    default: true
  }
})


</script>

<template>
  <div ref="boxRef" class="box" >
    <UserBox type="1" placement="right-start" class="user-info" :class="{unTop:!isTopLevel}"></UserBox>

    <div class="content" :class="contentClass">
      <div style="width: 100%; margin: 0.6rem 0 0.5rem 0">
        <span style="margin-right: 0.5rem; margin-bottom: 0.5rem">张三</span>
        <span style="font-size: 11px; color: #909399">xx学院xx班</span>
      </div>
      <div class="text" :class="textClass">
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
        评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
      </div>
      <div style="display: flex; align-items: center">
        <span>2023-03-11 06:42</span>
        <el-divider direction="vertical"/>
        <el-link>赞</el-link>
        <el-divider direction="vertical"/>
        <el-link>踩</el-link>
        <el-divider direction="vertical"/>
        <el-link>回复</el-link>
        <span v-if="isShowMoreBtn">
          <el-divider direction="vertical"/>
          <el-link @click="showMore">{{ btnText }}</el-link>
        </span>
      </div>
    </div>
  </div>

  <div v-if="isTopLevel" class="reply">
    <NormalRow v-for="item in 3" :isTopLevel="false"></NormalRow>

    <div style="margin-top: 1rem;display: flex;align-items: center;">
      共xx条回复，
      <el-link>点击查看</el-link>
    </div>
    <el-divider/>
  </div>
</template>

<style scoped>
.reply {
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  margin-left: 5rem;
}

.box {
  display: flex;
}

.box .user-info {
  height: 8rem;
  width: auto;
  display: flex;
}
.box .user-info.unTop{
  height: 4rem;
}

.box .content {
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  max-height: 13rem;
}
.box .content.show {
  max-height: none;
  height: auto;
}

.box .content .text.hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  word-break: break-all;
  -webkit-box-orient: vertical;
}
</style>